<template>
    <!-- 图片上传 -->
    <div class="flex-warp">
        <div v-for="(item, index) in list" :key="index" class="img-size rel">
            <img class="pointer" :src="item" @click="handleFileOpen(item)" />
            <div class="img-del pointer" v-if="!disabled" @click="handleFileDel(index)">
                <img src="@/assets/img/shangpin_del.png" />
            </div>
        </div>
        <el-upload multiple v-if="list.length < limit" v-loading="loading" :show-file-list="false" :auto-upload="false" :on-change="handleChange" :accept="getAcceptValue" :disabled="disabled || loading">
            <template #trigger v-if="!disabled">
                <div class="img-size">
                    <img src="@/assets/img/shangpin_img.png" />
                </div>
            </template>
        </el-upload>
    </div>
</template> 
<script setup>
import { ref, computed, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import { ElMessage } from "element-plus";
import { deepClone } from "@/utils/index.js";
import { useTrigger } from "@/hooks/useValidatorRules.js";
const { emitTrigger } = useTrigger();
const emits = defineEmits(["update:modelValue"]);
const props = defineProps({
    modelValue: {
        type: [Array, String],
        default: null,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    accept: {
        type: Array,
        default: [],
    },
    limit: {
        type: [String, Number],
        default: 9999,
    },
    type: {
        type: String,
        default: "Array",
    },
});
const loading = ref(false);
const getAcceptValue = computed({
    get: () => {
        return props.accept.join(",");
    },
});
const list = computed({
    get: () => {
        if (!props.modelValue) {
            return [];
        } else if (props.type === "Array") {
            return props.modelValue || [];
        } else if (props.type === "String") {
            return props.modelValue.split(",");
        }
    },
    set: (data) => {
        if (props.type === "Array") {
            emits("update:modelValue", data);
        } else if (props.type === "String") {
            emits("update:modelValue", data.join(","));
        }
        emitTrigger();
    },
});

const handleFileOpen = (item) => {
    window.open(item);
};
const handleFileDel = (index) => {
    const d = deepClone(list.value);
    d.splice(index, 1);
    list.value = d;
};
const handleChange = (file) => {
    const d = deepClone(list.value);
    if (d && d.length + 1 > props.limit * 1) {
        ElMessage.warning(`超出上传最大限制${props.limit}`);
        return;
    }
    loading.value = true;
    const formData = new FormData();
    formData.append("uploadFile", file.raw);
    proxy.$post({ url: "/upload", data: formData }).then((res) => {
        d.push(res.url);
        list.value = d;
        loading.value = false;
    });
};
</script>
<style lang="less" scoped>
.img-size {
    width: 120px;
    height: 96px;
    //   margin-right: 10px;
    // border: 1px dashed rgba(0, 0, 0, 0.17);
    & + .img-size {
        margin-left: 10px;
    }
    & + div {
        margin-left: 10px;
    }
    .img-del {
        position: absolute;
        top: -9px;
        right: -10px;
        width: 20px;
        height: 20px;
        line-height: 0px !important;
        z-index: 9;
        & > img {
            width: 100%;
            height: 100%;
            border-radius: 30%;
        }
    }
}
</style>

